<template>
  <div class="login-box">
    <!--头像-->
    <div class="login-avatar">
      <img src="~assets/apple0.jpg" alt="">
    </div>
    <!--表单-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm" @keyup.enter.native="login">
      <el-form-item prop="username">
        <el-input prefix-icon="el-icon-s-custom"
                  v-model="ruleForm.username"
                  placeholder="请输入用户名"
                  @keyup.down.native="changeFocus('pswInput')"
                  ref="userInput"
                  autofocus></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input prefix-icon="el-icon-lock"
                  v-model="ruleForm.password"
                  @keyup.up.native="changeFocus('userInput')"
                  ref="pswInput"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="form-action">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    
    </el-form>
  </div>
</template>

<script>
  import {validateUser} from 'network/login'

  export default {
    name: "loginBox",
    data() {
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
          ],
          password: [
            {min: 5, max: 20, message: '长度必须在 5 到 20 个字符', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      changeFocus(inputName) {
        this.$refs[inputName].focus()
      },
      resetForm() {
        this.$refs.ruleForm.resetFields()
      },
      login() {
        //表单预验证
        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return;
          //向后台发送post请求
          // validateUser(this.ruleForm).then(result => {
          //   const {data: res} = result;
          //   if (res.meta.status !== 200) return this.$message.error('帐号或密码错误')
          //   //把token保存到session中
          //   sessionStorage.setItem('token', res.data.token)
          //   //跳转到主页
          //   this.$router.push('/home')
          // })
          const {data: res} = await validateUser(this.ruleForm)
          if (res.meta.status !== 200) return this.$message.error('帐号或密码错误')
          //把token保存到session中
          sessionStorage.setItem('token', res.data.token)
          //跳转到主页
          this.$router.push('/home')
        })
      }
    }
  }
</script>

<style scoped>
  .login-box {
    position: absolute;
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .login-avatar {
    width: 140px;
    height: 140px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 50%;
  }
  
  .login-avatar img {
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 5px 6px #3EA7E8;
  }
  
  .ruleForm {
    width: 90%;
    position: absolute;
    bottom: 30px;
    left: 5%;
  }
  
  .form-action {
    display: flex;
    justify-content: flex-end;
  }
</style>